<template>
  <Box title="云台操作">
    <div class="plaform-handle handle1">
      <el-scrollbar>
        <div class="name f-r a-c f-s">
          <img src="@/assets/icon_shishi_active.png" alt="">
          <span>无人机操作</span>
        </div>
        <div class="plaform-handle-icon">
          <div class="icon top" @click="handleDirection('top')"></div>
          <div class="icon bottom" @click="handleDirection('bottom')"></div>
          <div class="icon left" @click="handleDirection('left')"></div>
          <div class="icon right" @click="handleDirection('right')"></div>
        </div>
        <div class="input-box f-r a-c">
          <div class="input-label">平移控制（米）</div>
          <el-input type="number" :step="1" placeholder="平移控制（米）" v-model="handleForm.x"></el-input>
        </div>
        <div class="input-box f-r a-c">
          <div class="input-label">平移控制（米）</div>
          <el-input type="number" :step="1" placeholder="高度控制（米）"  v-model="handleForm.y"></el-input>
        </div>
        <div class="name f-r a-c" style="margin-top: 20px">
          <img src="@/assets/icon_shishi_active.png" alt="">
          <span>任务控制</span>
        </div>
        <div class="control-tabs f-r a-c j-b">
          <div
              @click="handleForm.control = item"
              :class="['control-tab', item === handleForm.control ? 'active' : '']" v-for="item in controlList">{{ item }}</div>
        </div>
        <div class="name f-r a-c" style="margin-top: 20px">
          <img src="@/assets/icon_shishi_active.png" alt="">
          <span>偏轨调整</span>
        </div>
        <div style="width: 100%">
          <el-progress :percentage="50" :show-text="false" :stroke-width="12"/>
          <div style="height: 10px"></div>
          <div class="f-r a-c j-b" style="margin-bottom: 24px">
            <div class="plus-icon">
              <img src="@/assets/monitor/plus.png" alt="" @click="addAnge">
              <span class="text">{{ handleForm.leftAngle }}</span>
            </div>
            <div class="plus-icon">
              <img src="@/assets/monitor/mus.png" alt=""  @click="musAnge">
              <span class="text">{{ handleForm.rightAngle }}</span>
            </div>
          </div>
        </div>
        <div class="f-r a-c j-b" style="width: 100%;margin: 10px 0">
          <div class="name f-r a-c" style="margin: 0">
            <img src="@/assets/icon_shishi_active.png" alt="">
            <span>启动键盘模式</span>
          </div>
          <el-switch v-model="handleForm.keyword" :active-value="1" :inactive-value="0" ></el-switch>
        </div>
        <div class="f-r a-c j-b" style="width: 100%;margin: 10px 0">
          <div class="name f-r a-c"  style="margin: 0">
            <img src="@/assets/icon_shishi_active.png" alt="">
            <span>指点飞行</span>
          </div>
          <el-switch v-model="handleForm.fly" :active-value="1" :inactive-value="0" ></el-switch>
        </div>
      </el-scrollbar>
    </div>
    <div class="plaform-handle handle2">
      <el-scrollbar>
        <div class="name f-r a-c f-s">
          <img src="@/assets/icon_shishi_active.png" alt="">
          <span>快速操作</span>
        </div>
        <div class="control-tabs f-r a-c j-b">
          <div
              @click="handleForm2.control = item"
              :class="['control-tab', item === handleForm2.control ? 'active' : '']" v-for="item in controlList2">{{ item }}</div>
        </div>
        <div class="name f-r a-c f-s">
          <img src="@/assets/icon_shishi_active.png" alt="">
          <span>自动化任务</span>
        </div>
        <div class="input-box f-r a-c">
          <div class="input-label">任务名称：</div>
          <el-select v-model="handleForm2.task">
            <el-option label="选项1" value="选项1"></el-option>
            <el-option label="选项2" value="选项2"></el-option>
          </el-select>
        </div>
        <div class="input-box f-r a-c">
          <div class="input-label">飞行方式：</div>
          <el-select v-model="handleForm2.flyWay">
            <el-option label="选项1" value="选项1"></el-option>
            <el-option label="选项2" value="选项2"></el-option>
          </el-select>
        </div>
        <div class="input-box f-r a-c">
          <div class="input-label">返航方式：</div>
          <el-select v-model="handleForm2.back">
            <el-option label="选项1" value="选项1"></el-option>
            <el-option label="选项2" value="选项2"></el-option>
          </el-select>
        </div>
        <div style="padding: 20px 0;width: 100%">
          <el-button style="width: 100%" size="large" type="primary">立即下载</el-button>
        </div>
        <div class="input-box f-r a-c">
          <img style="width: 16px;height: 16px;margin-right: 5px" src="@/assets/monitor/radio-check.png" alt="">
          <div class="input-label">无人机&机库动作日志</div>
        </div>
        <div class="input-box f-r a-c">
          <img style="width: 16px;height: 16px;margin-right: 5px" src="@/assets/monitor/error.png" alt="">
          <div class="input-label">未知 <span style="color: #1A1A1A">2022-10-28 13:56:42</span></div>
        </div>
      </el-scrollbar>
    </div>
    <div class="platformMap" id="platformMap">

    </div>
  </Box>
</template>

<script setup>
import Box from './box'
import AMapLoader from "@amap/amap-jsapi-loader";
import { MapKey } from '@/plugins/amap'
import {onMounted, onUnmounted, ref} from "vue";
const handleForm = ref({
  x: 0,
  y: 0,
  control: '停止',
  // 偏轨调整
  keyword: 1,
  // 指点飞行
  fly: 1,
  // 左偏角度
  leftAngle: -180,
  // 右偏角度
  rightAngle: 180
})
const controlList = ref(['暂停', '停止', '恢复'])
const handleDirection = (direction) => {
  console.log(direction)
}
const addAnge = () => {
  handleForm.leftAngle += 1
}
const musAnge = () => {
  handleForm.rightAngle -= 1
}

const controlList2 = ref(['拍摄照片', '开始录像', '紧急停止', '立即返航'])
const handleForm2 = ref({
  control: '拍摄照片',
  task: '选项1',
  flyWay: '选项1',
  back: '选项1'
})

/**
 * 地图
 */
let map = null;

onMounted(() => {
  AMapLoader.load({
    key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
      .then((AMap) => {
        map = new AMap.Map("platformMap", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          layers: [new AMap.TileLayer.Satellite()],
          zoom: 14, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style lang="scss">
.platformMap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.control-tabs {
  width: 100%;
  .control-tab {
    width: 80px;
    height: 36px;
    border-radius: 10px;
    background: #F3F3F3;
    border: 1px solid #F3F3F3;
    line-height: 32px;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
    &.active {
      background: rgba(23,189,178,0.1);
      border: 2px solid #17BDB2;
      color: #17BDB2;
    }
  }
}
.plus-icon {
  display: flex;
  align-items: center;

  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
  .text {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
  }
}
.plaform-handle {
  position: absolute;
  width: 306px;
  height: calc(100% - 180px);
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99;
  .el-scrollbar {
    padding: 20px;
    .el-scrollbar__bar.is-horizontal  {
      display: none !important;
    }
  }
  .plaform-handle-icon {
    margin: 0 auto;
    flex-shrink: 0;
    background-image: url("~@/assets/monitor/handle.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 180px;
    height: 180px;
    position: relative;
    margin-bottom: 18px;
    .icon {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      cursor: pointer;
    }
    .top {
      top: 11px;
      width: 23px;
      height: 17px;
      background-image: url("~@/assets/monitor/handle-top.png");
      transform: translateX(-50%);
      left: 50%;
    }
    .bottom {
      width: 23px;
      height: 17px;
      background-image: url("~@/assets/monitor/handle-bottom.png");
      bottom: 11px;
      transform: translateX(-50%);
      left: 50%;
    }
    .left {
      width: 17px;
      height: 23px;
      background-image: url("~@/assets/monitor/handle-left.png");
      left: 11px;
      transform: translateY(-50%);
      top: 50%;
    }
    .right {
      width: 17px;
      height: 23px;
      background-image: url("~@/assets/monitor/handle-right.png");
      right: 11px;
      transform: translateY(-50%);
      top: 50%;
    }
  }
  .name {
    width: 100%;
    text-align: left;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #1B1B1B;
    line-height: 32px;
    margin-bottom: 24px;
    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
.handle1 {
  left: 37px;
}
.handle2 {
  right: 37px;
  width: 336px;
  .control-tabs {
    flex-wrap: wrap;
    .control-tab {
      width: 140px;
      margin-bottom: 20px;
    }
  }
}
.input-box {
  width: 100%;
  height: 36px;
  background: #F3F3F3;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 0 20px;
  .input-label {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    line-height: 36px;
    flex-shrink: 0;
  }
  .el-select__wrapper,
  .el-input__wrapper {
    box-shadow: none;
    background-color: transparent;
  }
  .el-select__selected-item,
  .el-input__inner {
    text-align: right;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #1A1A1A;
  }
}
</style>
